<template>
    <div class="pagehome">
        <div class="content">
            <div @click="toPath('/beCurrent')"><img src="../assets/wuguan.png" alt=""></div>
            通用语言模型对话
        </div>
        <div class="content noMargin">
            <div @click="toPath('/learningAids')"><img src="../assets/wuguan.png" alt=""></div>
            智能学习助手
        </div>
        <div class="content">
            <div @click="toPath('/InstructorAssistant')"><img src="../assets/wuguan.png" alt=""></div>
            智能教员助手
        </div>
        <div class="content noMargin">
            <div @click="toPath('/CreateChatRoom')"><img src="../assets/luntan-on.png" alt=""></div>
            智能学习伙伴讨论组
        </div>
    </div>
</template>

<script>
export default {
    name: '',
    data() {
        return {
        }
    },
    methods: {
        toPath(Url) {
            let routeUrl = this.$router.resolve({
                path: Url,
                query: {}
            });
            window.open(routeUrl.href, '_blank');
        },
    },
}

</script>
<style lang="scss" scoped>
.pagehome {
    width: 1200px;
    margin: 30px auto;

    .content {
        width: 575px;
        float: left;
        padding: 30px 10px;
        margin-right: 10px;
        margin-bottom: 10px;
        border-radius: 10px;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .2);
        text-align: center;
        line-height: 30px;

        >div {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .noMargin {
        margin-right: 0 !important;
    }
}
</style>